<template>
	<view class="container">
		<view class="content">
			<view class="list_box" v-for="item in pays.uateList">
				<view class="list_title">
					<view class="user">
						<view>
							<image :src="item.ifAnonymous ? item.userAvatar : `${iconUrl}15.png`" mode=""></image>
							<text class="name xjs-line-one">{{item.ifAnonymous ? item.nickName : '匿用用户'}}</text>
						</view>
						<text>{{item.createTimeStr}}</text>
					</view>
				</view>
				<view class="list_content">{{item.content}}</view>
				<view class="list_bottom" @tap="goDetails(item.orderId)">
					<view class="list_bottom_left">{{item.goodsName}}｜{{item.dayCount}}天/{{item.petCount}}只宠物</view>
					<view class="list_bottom_right">详情</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import { reactive, onMounted, computed, ref } from 'vue'
	import api from '@/api'
	import { useStudioStoreToRefs } from '@/store/useStudioStore'
	const { studio } = useStudioStoreToRefs()
	const iconUrl = ref("https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-")
	let pays = reactive<any>({
		uateList: [],
		page: 1,
		limit: 10,
		loading: false,
		finished: false,
	})
	onLoad(() => {
		getUateList()
	})
	const goDetails = (orderId : string) => {
		uni.navigateTo({
			url: '/pages/studioOrders/orderDetail/index?id=' + orderId,
		});
	}

	const getUateList = async () => {
		const res : any = await api({
			method: 'get',
			url: `/mall/order/assess/page`,
			data: { page: pays.page, limit: pays.limit, studioId: studio.value.id }
		})
		if (res.data.records.length != 0) {
			pays.uateList = pays.uateList.concat(res.data.records);
			pays.finished = true
		} else {
			pays.finished = false
		}
		if (pays.uateList.length <= 0) {
			pays.loading = true
		}
	}
	onReachBottom(() => {
		if (pays.finished && !pays.loading) {
			pays.page++
			getUateList()
		}
	})
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F9F6F6;
		height: 100%;
		box-sizing: border-box;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 24rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
	}

	.content {
		padding-top: 24rpx;

		.list_box {
			width: 686rpx;
			margin: 0 auto;
			margin-bottom: 24rpx;
			padding: 32rpx;
			background-color: #fff;
			border-radius: 24rpx;
			box-sizing: border-box;

			.list_title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 1;

				.user {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					@include flex(center, space-between);

					image {
						width: 64rpx;
						height: 64rpx;
						margin-right: 16rpx;
						vertical-align: middle;
						border-radius: 50%;
					}

					>view {
						width: calc(100% - 280rpx);
						@include flex(center);
					}

					text {
						flex: 1;
						color: #7C807F;
						font-size: 26rpx;
					}

					.name {
						width: 404rpx;
						color: #1B2120;
						font-size: 36rpx;
						font-weight: bold;
					}
				}
			}

			.list_content {

				margin-bottom: 24rpx;
				font-size: 28rpx;
				color: #5C5E5E;
				line-height: 38rpx;
				word-break: break-all;
			}

			.list_bottom {

				width: 622rpx;
				margin: 0 auto;
				padding: 24rpx;
				background-color: #F5F6F7;
				border-radius: 12rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 1;
				font-size: 26rpx;
				color: #5C5E5E;

				.list_bottom_left {}
			}

		}
	}
</style>